<template>
  <div class="article-list">
      <!-- 
        load事件：
            List初始化后会触发一次load事件，用于加载第一屏的数据；
            如果第一次请求加载的数据条数较少，导致列表内容无法铺满一屏，
            list将继续触发load事件，直到内容铺满屏幕或所有数据加载完
        loading属性：控制加载中的loading状态，
            非加载中loading为false，此时会根据列表滚动的位置判断是否触发load事件（列表内容不足一屏时则直接触发）
            加载中loading为true,表示正在发送异步请求，此时不会触发load事件
        finish属性：控制加载结束的状态
            每次请求结束之后，需要手动将loading设置为false，表示本次加载结束
            所有数据加载结束，finish设置为true,
        
       -->
    <van-pull-refresh v-model="isRefreshLoading" @refresh="onRefresh"  :success-text="refreshSuccessText">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
        >
        <!-- <van-cell v-for="(article,index) in list" :key="index" :title="article.title" />-->
        <!-- 列表项组件 -->
        <article-item  v-for="(article,index) in list" :key="index" :article="article" ></article-item>
        </van-list> 
    </van-pull-refresh>
  </div>
</template>
<script>
import { GetArticlesList } from "@/api/article"
import ArticleItem from "@/components/article-item"
export default {
  data() {
    return {
      list: [],   // 存储列表数据的数组
      loading: false,  // 控制加载中loading状态
      finished: false,  // 控制数据加载结束的状态
      timestamp:null,  // 请求当前页或下一页的时间戳
      error: false,  // 是否出错
      isRefreshLoading:false,   // 下拉刷新状态
      refreshSuccessText:""  // 刷新成功提示文本信息
    };
  },
  props: {
    channel: {
      type: Object,
      requred: true,
    },
  },
  created() {},
  methods: {
    async onRefresh(){
        try {
            // 请求获取数据
            let {  data } =await GetArticlesList({
                channel_id:this.channel.id,  
                timestamp:Date.now(),    // 下拉刷新必须最新数据
                with_top:1
            })
            // 测试几率代码 模拟失败
            // if(Math.random()>0.5){
            //     JSON.parse('aaaaa')
            // } 
            // 将数据追加到列表的头部
            const { results } = data.data;
            this.list.unshift(...results)  // 数组展开操作符
            // 关闭下拉刷新的loading状态
            this.isRefreshLoading = false;
            // 更新下拉成功后提示文本信息
            this.refreshSuccessText = `刷新成功，更新了${results.length}条数据`
        } catch (error) {
            console.log("下拉刷新出错"+error);
            this.refreshSuccessText = "刷新失败"
            this.isRefreshLoading = false
        }
    },
    async onLoad() {
        try {
            // 1.请求加载数据
            let {  data } =await GetArticlesList({
                channel_id:this.channel.id,   // 频道ID
                timestamp:this.timestamp || Date.now(),    // 时间戳，请求第1页是当前时间戳，下一页也使用在返回结果中
                with_top:1
            })
            // 2.结果放入到list数组中
            const { results } = data.data;
              console.log(results);
            this.list.push(...results)  // 数组展开操作符
            
            // 测试几率代码 模拟失败
            // if(Math.random()>0.5){
            //     JSON.parse('aaaaa')
            // } 

            // 3.本次数据加载结束之后将加载状态设置为结束
            this.loading = false;
            // 4.判断数据是否全部加载完成
            if(results.length){
                // 更新获取下一页的时间戳
                this.timestamp = data.data.pre_timestamp
            }else{
                this.finished = true;
            }
        } catch (error) {
            console.log("请求失败"+error);
            this.error = true;
            this.loading = false;
        }
    },
    // onLoad() {
    //     console.log("onLoad");
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
  },
  components: {
      ArticleItem
  },
};
</script>
<style scoped lang="less">
.article-list{
    // 百分之是参考父元素的
    // height: 100%;
    height: 79vh;
    overflow-y: auto;
}
</style>